import React, { Component } from 'react';
import { Grid, Modal, Toast, ActivityIndicator, Tag } from 'antd-mobile';
import { getMembers, removeDeviceUser, getopenid,setDocumentTitle } from '../utils'
import '../css/member.css';
//  家庭成员
class Members extends Component {

    constructor(props, context) {
        super(props, context);
        const members = this.props.location.members;
        this.itemWidth = document.documentElement.clientWidth / 3;
        this.size = this.itemWidth / 3 * 2;
        this.state = {
            members: members,
            show: false
        };
    }

    showDialog(index) {
        // 不能删除自身
        const member = this.state.members[index];
        if (member.openid === getopenid()) {
            return;
        }
        const msg = "确定删除家庭成员 '" + member.nickname + "' ? ";
        this.dialog = Modal.alert('删除用户', msg,
            [
                { text: '取消' },
                {
                    text: '确定', onPress: () =>
                        this.removeUser(member)
                },
            ]);
    }

    // 删除绑定的用户
    removeUser(member) {
        this.setState({
            show: true,
        });
        removeDeviceUser(member.openid, (data) => {
            if (this._isMounted) {
                this.setState({
                    show: false,
                });
                if (data.errcode === 0) {
                    let members = this.state.members.filter(item => {
                        return member.openid !== item.openid;
                    })
                    this.setState({
                        members: members
                    });
                    sessionStorage.setItem('members', JSON.stringify(members));
                    Toast.success('删除成功', 1, false);
                } else {
                    Toast.show('删除失败', 1, false);
                }
            }
        })
    }

    componentDidMount() {
        this._isMounted = true;
        document.title = localStorage.getItem('device_name');
        if (this.state.members === undefined) {
            getMembers((function (data) {
                if (this._isMounted && data) {
                    this.setState({ members: data });
                }
            }).bind(this));
        }
        setDocumentTitle("家庭圈");
    }

    componentWillUnmount() {
        this._isMounted = false;
        if (this.dialog) {
            this.dialog.close();
        }
        Toast.hide();
    }

    render() {
        return (
            <div>
                <Grid
                    data={this.state.members}
                    columnNum={3}
                    hasLine={false}
                    itemStyle={{ height: this.itemWidth + 10 }}
                    renderItem={(dataItem, index) => (
                        <div
                            onClick={this.showDialog.bind(this, index)}>
                            <div className="member-album" style={{
                                width: `${this.size}px`,
                                height: `${this.size}px`,
                            }}>
                                <div className='member-album-album-pic' style={{
                                    background: `url(${dataItem.headimgurl}) center center`,
                                    backgroundSize: 'cover',
                                    width: `${this.size}px`,
                                    height: `${this.size}px`,
                                }} />
                            </div>
                            <p style={{
                                fontSize: '14px', userSelect: 'none',
                                paddingBottom: 0,
                                marginBottom: 3,
                                marginTop:2
                            }}>
                                {dataItem.nickname}
                            </p>
                            {
                                getopenid() === dataItem.openid && <Tag style={{ background: '#15a67c', color: 'white' }} small>我</Tag>
                            }
                        </div>
                    )} />

                {
                    this.state.show &&
                    <ActivityIndicator
                        toast
                        text="正在删除..."
                        animating={this.state.show}
                    />
                }

            </div>
        );
    }
}

export default Members;